<template>
	<view style="position: relative;">
		<view class="mask"></view>
		<view class="main">
			<view class="flex-1">
				<view class="user-sec">
					<image src="../../static/images/icon_15.png" class="hdpic" mode="aspectFill"></image>
					<view class="flex-1">
						<view class="flex">
							<view class="tel">150******20</view>
							<view class="level">
								<image src="../../static/images/icon_16.png" class="tu" mode="widthFix"></image>
							</view>
							<image src="../../static/images/icon_17.png" class="sex" mode=""></image>

						</view>
						<view class="time">会员有效时间：2025-08-13</view>
					</view>

				</view>
				<view class="mod zk-sec">
					<view class="t-tit">选择开通折扣卡</view>
					<view class="list">
						<view class="item" v-for="(item,index) in list" :key="index" @click="chooseBtn(index)"
							:class="item.checked?'checked':''">
							<view class="top">
								<view class="fz">{{item.ka}}</view>
								<view class="price">
									￥<text>{{item.price}}</text>
								</view>
							</view>
							<view class="font">{{item.zk}}</view>
						</view>
					</view>
					<view class="tip">
						已选择开通 <text>月卡</text>
					</view>
				</view>
				<view class="mod rule-sec">
					<view class="t-tit">详细规则</view>
					<view class="txt">
						<view class="fz">
							<image src="../../static/images/icon_14.png" class="ico" mode="widthFix"></image>
							<view class="flex-1">
								开通充电会员后，即可在特定场站享受充电服务费折扣优惠。
							</view>
						</view>
						<view class="fz">
							<image src="../../static/images/icon_14.png" class="ico" mode="widthFix"></image>
							<text class="flex-1">
								充电会员属于虚拟商品，一经购买不得退款
							</text>
						</view>
						<view class="fz">
							<image src="../../static/images/icon_14.png" class="ico" mode="widthFix"></image>
							<text class="flex-1">
								如果用户在开通过程中遇到任何问题或疑虑，请及时联系客服：400-800-8000
							</text>
						</view>
					</view>
				</view>
			</view>
			<button class="submit">同意协议并支付</button>
			<view class="deal">
				<u-checkbox v-model="dealChecked" shape="circle" size="26" icon-size="16" active-color="#FE5E10"
					label-disabled="true" label-size="22">
					开通即视为同意 <text style="color:#FE5E10;">《会员服务协议》</text>
				</u-checkbox>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					ka: '月卡',
					price: '15',
					zk: '日常价9.5折',
					checked: false
				}, {
					ka: '季卡',
					price: '25',
					zk: '日常价8.5折',
					checked: false
				}, {
					ka: '年卡',
					price: '35',
					zk: '日常价7.5折',
					checked: false
				}],
				dealChecked: false
			}
		},
		onLoad() {

		},
		methods: {
			chooseBtn(index) {
				for (var i = 0; i < this.list.length; i++) {
					if (i == index) {
						this.list[i].checked = !this.list[i].checked
					} else {
						this.list[i].checked = false
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(@/batteryCharging/static/css/common.scss);

	.mask {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 1;
		height: 960rpx;
		background: linear-gradient(180deg, #FFE0D1 0%, #F5F7F9 100%);
	}

	.main {
		padding: 20rpx 20rpx;
		position: relative;
		z-index: 2;
		min-height: calc(100vh - env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;

		.mod {
			background-color: #fff;
			padding: 30rpx 30rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;

			.t-tit {
				font-size: 26rpx;
				color: #262626;
				font-weight: 700;
				margin-bottom: 20rpx;
			}
		}

		.user-sec {
			padding: 40rpx 25rpx;
			display: flex;
			align-items: center;

			.hdpic {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.tel {
				font-size: 32rpx;
				color: #262626;
				font-weight: 700;
			}

			.level {
				width: 50rpx;
				height: 40rpx;
				position: relative;
				margin-left: 8rpx;

				.tu {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 64rpx;
					margin-top: 8rpx;
				}
			}

			.sex {
				width: 36rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}

			.time {
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
				margin-top: 8rpx;
			}
		}

		.zk-sec {
			.list {
				display: flex;
				flex-wrap: wrap;
				margin-left: -2%;

				.item {
					width: 31.3%;
					margin: 0 0 0 2%;
					border-radius: 20rpx;
					overflow: hidden;
					background: #FEFAF2;
					border: 1px solid #FFF2CC;
					text-align: center;

					.top {
						padding: 25rpx 0 30rpx;

						.fz {
							font-size: 28rpx;
							color: #262626
						}

						.price {
							font-size: 48rpx;
							color: #262626;
							font-weight: 700;
							margin-top: 30rpx;
							line-height: 1;
							display: flex;
							align-items: baseline;
							justify-content: center;
							font-family: 'Arial';

							text {
								font-size: 80rpx;
								line-height: 1;
							}
						}

					}

					.font {
						font-size: 24rpx;
						color: #999999;
						padding: 20rpx 10rpx;
						line-height: 1.2;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					&.checked {
						background: linear-gradient(180deg, #FFECB3 0%, #FFF9E6 100%);
						border-color: transparent;

						.fz {
							color: #845115;
						}

						.price {
							color: #845115;
						}

						.font {
							color: #845115;
							background: linear-gradient(90deg, #FFD87D 0%, #FFEEC4 100%);
						}
					}
				}

			}

			.tip {
				font-size: 22rpx;
				color: #999999;
				margin-top: 20rpx;

				text {
					color: #FE5E10;
				}
			}
		}

		.rule-sec {
			.txt {
				.fz {
					font-size: 24rpx;
					color: #666666;
					line-height: 36rpx;
					display: flex;
					align-items: flex-start;
					margin-bottom: 15rpx;
				}

				.ico {
					width: 26rpx;
					height: 26rpx;
					margin: 3rpx 12rpx 0 0;
				}
			}
		}

		.submit {
			font-size: 28rpx;
			font-weight: 700;
			color: #fff;
			width: 100%;
			line-height: 100rpx;
			height: 100rpx;
			border-radius: 12rpx;
			background: linear-gradient(124.39deg, #FE5E10 0%, #FF8045 99.31%);
			margin: 50rpx auto 0;
		}

		.deal {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666;
			margin-top: 25rpx;
		}
	}
</style>